<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useUserStore, useCommonStore } from "@/stores/index.js";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import api from "@/api/api";

//导入图片
import weiquanTips from '@/assets/home/weiquan_tips.png'

// 使用Vue 3 Composition API
const router = useRouter();
const store = useUserStore();
const commonStore = useCommonStore();

// refs
const carInfo = ref({});

// 响应式数据
const field = reactive({
  description: "",
  memberName: "",
  memberPhone: "",
  plateNumber: "",
  brand: "",
  picList: [],
});

const pics = ref([]);
const fileList = ref([]);

// 从Vuex获取状态
const carList = computed(() => store.carList);
const currentCarIndex = computed(() => commonStore.currentCarIndex);
const userData = computed(() => store.userData);

// 方法
const onClickLeft = () => {
  router.back();
};

const afterRead = (files) => {
  let piclist = Array.isArray(files) ? files : [files];
  piclist.forEach(async (item) => {
    item.status = "uploading";
    item.message = "上传中...";
    const data = new FormData();
    data.append("file", item.file);
    let res = await api.upload(data);
    field.picList.push(res);
    item.status = "down";
    item.message = "";
  });
};

const beforeDel = (file, detail) => {
  field.picList.splice(detail.index, 1);
  fileList.value.splice(detail.index, 1);
};

const submit = async () => {
  if (!field.description) {
    Toast("请输入维权内容");
    return;
  }
  await api.common.submitWeiquan({
    ...field,
    type: 1,
  });
  Toast("提交成功");
  setTimeout(() => {
    router.back();
  }, 500);
};

// 生命周期钩子
onMounted(() => {
  carInfo.value = carList.value[currentCarIndex.value];
  field.brand = carInfo.value?.brand;
  field.plateNumber = carInfo.value?.plateNumber;
  field.memberName = userData.value.userName;
  field.memberPhone = userData.value.phone;
});
</script>
<template>
  <div class="add_wrapper">
    <van-nav-bar title="我要维权" class="nav_bar" fixed left-arrow @click-left="onClickLeft" />
    <van-image class="pic" :src="weiquanTips" />
    <div class="form">
      <van-cell required class="cell-required">
        <template #title>
          <span class="cell_title">请大致描述一下您需要维权的事件</span>
        </template>
        <template #label>
          <van-field v-model="field.description" rows="5" autosize maxlength="200" show-word-limit type="textarea"
            placeholder="不超过200字..." />
        </template>
      </van-cell>
      <van-form class="field-form">
        <van-field v-model="field.memberName" label="诉求者姓名" placeholder="请输入" required
          :rules="[{ required: true, message: '请填写姓名' }]" />
        <van-field v-model="field.memberPhone" label="诉求者手机号" placeholder="请输入" required
          :rules="[{ required: true, message: '请填写手机号' }]" />
        <van-field v-model="field.plateNumber" label="车牌号" placeholder="绑定信息后自动显示" />
        <van-field v-model="field.brand" label="车辆品牌" placeholder="绑定信息后自动显示" />
        <!-- <van-field label="是否新能源">
          <template #input>
            <van-radio-group v-model="field.isD" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field> -->
        <van-field name="uploader" label="图片上传(没有可以不传)">
          <template #input>
            <van-uploader v-model="fileList" max-count="9" :after-read="afterRead" :before-delete="beforeDel" />
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button round block type="primary" @click="submit">点击提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>


<style lang="less" scoped>
.add_wrapper {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg") no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: top;
  box-sizing: border-box;
  padding: 200px 50px 50px 50px;

  :deep(.van-nav-bar__content) {
    height: 100px;
    margin: 25px auto;
  }

  :deep(.van-nav-bar__title) {
    font-size: 54px;
    font-weight: 500;
  }

  :deep(.van-ellipsis) {
    overflow: initial;
  }

  :deep(.van-nav-bar__left) {
    left: 30px;
  }

  .pic {
    margin-top: 20px;
    width: 100%;
    height: 422px;
  }

  .form {
    background: #fff;
    margin-top: 100px;
    padding: 50px 30px;

    .cell-required {
      &::before {
        font-size: 50px;
      }

      :deep(.van-cell) {
        background: #eee;
        margin: 20px 0;
      }

      :deep(.cell_title) {
        font-size: 50px;
        color: #333;
        margin-left: 20px;
      }

      :deep(.van-field__control) {
        padding: 50px;
        line-height: 40px;
      }


      :deep(.van-cell__value) {
        font-size: 44px;
      }

      :deep(.van-field__word-limit) {
        font-size: 40px;
        margin: 50px 0;
      }
    }

    .field-form {
      &::before {
        font-size: 50px;
      }

      :deep(.van-cell) {
        padding: 25px 0;
        font-size: 44px;
        align-items: center;
      }

      :deep(.van-field__label) {
        width: 320px;
        line-height: 80px;
        color: #788087;
      }

      :deep(.van-uploader__upload) {
        width: 300px;
        height: 300px;
      }

      :deep(.van-uploader__upload-icon) {
        font-size: 50px;
      }

      :deep(.van-button--normal) {
        font-size: 44px;
        height: 150px;
      }

    }

  }

  .nav_bar {
    :deep(.van-icon) {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }
  }
}
</style>
